<template>
    <div class="detFooter">
        <div class="choice" @click="showPopup">
            <i>已选</i>
            <i>{{phoneObj.name}} {{edition}} {{phoneColor}} x1</i>
            <svg t="1641140293640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15454" width="18" height="18"><path d="M612.219 515.297L230.02 894.085a33.516 33.516 0 0 0-0.138 47.493l11.868 11.914a33.792 33.792 0 0 0 47.647 0.144l418.068-414.31a33.577 33.577 0 0 0 0.144-47.514L291.999 75.028c-13.123-13.143-34.473-13.21-47.647-0.138l-11.94 11.843a33.546 33.546 0 0 0-0.143 47.519l379.95 381.045z" p-id="15455" fill="#bfbfbf"></path></svg>
        </div>
      <van-popup 
        closeable 
        position="bottom" 
        round  
        v-model="show" 
        :style="{ height: '60%' }"
    > 
    <!-- 点击  已选  的弹框 -->
        <div class="detailPopup ">
            
            <div class="popupheader">
                <div class="top">
                    <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d1e0bcbbcb21c4c7b23126f9d35a0bd8.png" alt="">
                </div>
                <div class="bottom">
                    <h1>￥{{phoneInfo.price}}</h1>
                    <p>{{phoneObj.name}} {{edition}} {{phoneColor}}</p>
                </div>
            </div>
        </div>
        <!-- 版本 -->
        <div class="detailEdition">
            <h4 class="detailEditionTop">版本</h4>
            <ul class="detailEditionBottom">
                <li :class="{active : editionId === item.id}" @click="changeEdition(item.id)" v-for="item in phoneDetailList" :key="item.id">
                    {{item.edition}}
                </li>
            </ul>
        </div>
        <!-- 颜色 -->
        <div class="detailColor">
            <h4 class="detailColorTop">颜色</h4>
            <ul class="detailColorBottom">
                <li class="zw" :class="{active : id == colorItem.prop_value_id}" @click="changeColor(colorItem.prop_value_id)" v-for="colorItem in detailColorList" :id="colorItem.prop_value_id" :key="colorItem.prop_value_id">
                    {{colorItem.name}}
                </li>
            </ul>
        </div>
        <!-- 购买数量 -->
        <div class="detailBuyNum">
            <div class="BuyLeft">
                <h4>购买数量</h4>
            </div>
            <div class="BuyRight">
                <span @click="handleChangeSkuNum('decrement')">
                    <svg t="1641193123235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3963" width="20" height="20"><path d="M144 567c-24.3 0-44-19.7-44-44s19.7-44 44-44h736.127c24.3 0 44 19.7 44 44s-19.7 44-44 44H144z" p-id="3964" fill="#bfbfbf"></path></svg>
                </span>
                <span>
                    <input type="number"  :value="phoneInfo.buyNum">
                </span>
                <span @click="handleChangeSkuNum('increment')">
                    <svg t="1641193000520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2115" width="20" height="20"><path d="M902.343 570.936h-331.78v331.833c0 32.337-26.226 58.537-58.564 58.537-32.337 0-58.563-26.2-58.563-58.537V570.936H121.654c-32.364 0-58.564-26.2-58.564-58.538 0-32.325 26.203-58.537 58.564-58.537h331.78V122.028c0-32.325 26.226-58.537 58.563-58.537 32.338 0 58.564 26.213 58.564 58.537v331.834h331.78c32.364 0 58.565 26.211 58.565 58.535-0.001 32.337-26.2 58.536-58.565 58.536z" p-id="2116" fill="#bfbfbf"></path></svg>
                </span>
            </div>
            <van-goods-action>
                <van-goods-action-button @click="addCart" color="linear-gradient(90deg,#fdcf00,#fd9b00)"  type="warning" text="加入购物车" />
                <van-goods-action-button color="linear-gradient(90deg,#ff7310,#fe3f00)" type="danger" text="立即购买" />
            </van-goods-action>
        </div>
    </van-popup>
    <!-- 送货地址 -->
        <div class="address">
            <div>
                <i>送至</i>
            </div>
            <div>
                <div>
                   <svg t="1641194910371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5320" width="20" height="20"><path d="M512.573563 457.218326c-63.548338 0-115.235534-52.224432-115.235534-116.486014 0-64.22372 51.687196-116.448152 115.235534-116.448152 63.551408 0 115.236558 52.224432 115.236558 116.448152C627.811144 404.993894 576.125995 457.218326 512.573563 457.218326zM512.573563 256.280898c-46.089711 0-83.566254 37.878702-83.566254 84.451414 0 46.569642 37.476543 84.4903 83.566254 84.4903 46.111201 0 83.587744-37.920658 83.587744-84.4903C596.161307 294.1596 558.684764 256.280898 512.573563 256.280898zM512.114099 864.745926 500.115833 850.40122c-10.462283-12.497639-256.374018-307.84939-256.374018-500.709863 0-154.788365 120.601752-280.69596 268.831748-280.69596 147.597593 0 268.199345 125.907595 268.87268 280.620235 0.807389 192.936197-246.720148 488.325811-257.258155 500.82345L512.114099 864.745926zM512.573563 100.992135c-130.791835 0-237.182934 111.562888-237.182934 248.700245 0 157.866471 187.035814 402.835741 236.799194 465.213417 50.033533-62.337767 238.298338-307.269175 237.604536-465.135646C749.218238 212.556047 642.827139 100.992135 512.573563 100.992135zM704.840518 654.540414l0 31.648814 63.33856 0 63.377446 237.165538L198.035844 923.354765l63.377446-237.165538 47.493687 0L308.906977 654.540414 229.705124 654.540414l-79.162968 300.464189 728.527498 0L799.885198 654.540414 704.840518 654.540414z" p-id="5321" fill="#2c2c2c"></path></svg> 
                   <i>北京市 东城区</i>
                </div>
                <p>明天14点前付款，预计1月5日送达</p>
            </div>
            <div>
                <svg t="1641140293640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15454" width="18" height="18"><path d="M612.219 515.297L230.02 894.085a33.516 33.516 0 0 0-0.138 47.493l11.868 11.914a33.792 33.792 0 0 0 47.647 0.144l418.068-414.31a33.577 33.577 0 0 0 0.144-47.514L291.999 75.028c-13.123-13.143-34.473-13.21-47.647-0.138l-11.94 11.843a33.546 33.546 0 0 0-0.143 47.519l379.95 381.045z" p-id="15455" fill="#bfbfbf"></path></svg>
            </div>
        </div>

        <!-- 装饰底部 -->
        <ul class="footerImg">
            <li>
                <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6eb1fc52a36463e3b209ce4c62254811.jpg?w=1080&h=2519&bg=10101" alt="">
            </li>
            <li>
                <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5e6c84e9e788383553058b91271a9203.jpg?w=1080&h=1973&bg=FFFFFF" alt="">
            </li>
            <li>
                <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a17b516edacf1233ac5499d1142445e6.jpg?w=1080&h=620&bg=0" alt="">
            </li>
        </ul>


    <!-- 底部 -->
        <van-goods-action >
            <van-goods-action-icon  icon="wap-home-o" to="/home" text="首页" color="#ff5000" />
            <van-goods-action-icon  icon="service-o"  text="客服" color="#ee0a24" />
            <van-goods-action-icon   icon="cart-o" to="/category" text="购物车" />
            <van-goods-action-button  type="warning" @click="showPopup" text="加入购物车" />
            <van-goods-action-button  type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
import { mapState } from 'vuex';

  export default {
    name:'DetailFooter',
    data(){
        return{
            show : false,
            //切换颜色
            id:4,
            phoneColor : '清凉薄荷',
            //版本Id
            editionId:1,
            //版本
            edition : '8GB+128GB',
            //手机版本详情
            phoneDetailList:[
                {id: 1,edition : '8GB+128GB',editionPrice : 0},
                {id: 2,edition : '12GB+256GB',editionPrice : 1000},
                {id: 3,edition : '8GB+256GB',editionPrice : 300},
            ],
            //收集手机的信息
            phoneInfo : {
                id : 0,
                name : "Xiaomi 11",
                buyNum : 1,  //购买数量
                price : '', //最终价格
                image_url : '', //手机图片

            },
            objPhone:{}
        }
    },
    props:['phoneObj'],
    computed:{
        ...mapState({
            detailColorList : state => state.detail.detailColorList
        }),
    },
    mounted(){
        // console.log(this.objPhone)
        // this.phoneInfo.image_url = this.objPhone.image_url
    },
    watch:{
        phoneObj(){
            this.objPhone = this.phoneObj
        }
    },
    methods: {
        //获取商品详情颜色
        showPopup() {
            this.show = true;
            let {price,name,product_id,image_url} = this.phoneObj
            this.phoneInfo.price = price
            this.phoneInfo.image_url = image_url
            this.phoneInfo.id = product_id
            this.phoneInfo.name = name
            this.$store.dispatch('getDetailColor')

        },
        //点击切换颜色
        changeColor(id){
            // console.log(id)
            //遍历得到点击的id

            let result = this.detailColorList.find(item=>{
                return item.prop_value_id === id
            })
            // console.log(result)
            this.id = result.prop_value_id
            this.phoneColor = result.name

        },
        //点击添加到购物车
        addCart(){
            //收集数据
            // console.log(this.phoneObj)
            let {price,name,product_id,image_url} = this.phoneObj
            this.phoneInfo.id = product_id
            this.phoneInfo.name = name
            this.phoneInfo.price = price
            this.phoneInfo.image_url = image_url
             this.$toast.success('添加成功,可到购物车中查看')
             this.$router.push({
                 name : 'cart',
                 params : {...this.phoneInfo}
             })
             console.log(this.phoneInfo)
        },
        //点击切换版本高亮
        changeEdition(id){
            
            let result = this.phoneDetailList.find(item=>{
                return item.id === id
            })
            // console.log(result)

            this.editionId = result.id
            this.edition = result.edition
            this.phoneInfo.price = this.phoneObj.price
            this.phoneInfo.price = (this.phoneInfo.price*1) + result.editionPrice
        },
        //点击按钮实现 购买数量的变化
        handleChangeSkuNum(type){
            // console.log(event.target.value)
            
            switch(type){
                case 'increment':
                    let {buyNum} = this.phoneInfo
					if(buyNum === 5) {
                        alert('只能购买5台手机')
                    }else{
                        this.phoneInfo.buyNum += 1
                    }
                    
					break;
                case 'decrement' : 
					if(this.phoneInfo.buyNum === 1) {
                        alert('最少购买1台手机')
                    }else{
                        this.phoneInfo.buyNum -= 1
                    }
                    break;  
            }
        }
        

  },
  }
</script>

<style lang="less" scoped>
  .detFooter{
      height: 1rem;
      .choice{
          height: 0.2rem;
          font-size: 0.14rem;
          i{
              margin-left: 0.2rem;
              float: left;
          }
          svg{
              float: right;
              margin-right: 0.1rem;
          }
      }
    //   点击已选 弹框里的样式
      .detailPopup{
          height: 1.1rem;
          margin: 0.2rem;
          margin-bottom: 0.01rem;
          .top{
              float: left;
              margin-right: 0.1rem;
              width: 0.8rem;
              height: 0.8rem;
              background-color: rgba(226, 211, 211,0.5);
              img{
                  width: 100%;
                  height: 100%;
              }
          }
          .bottom{
              float: left;
              height: 0.8rem;
              
              h1{
                  font-weight: 700;
                  color: rgb(228, 102, 19);
                  margin-bottom: 0.2rem;
                  padding-top: 0.1rem;
              }
          }
      }
    //   版本样式
      .detailEdition{
          margin-left: 0.2rem;
          .detailEditionBottom{
              display: flex;
              justify-content: space-evenly;
              margin-top: 0.1rem;
              li{
                  margin-right: 0.2rem;
                  height: 0.25rem;
                  width: 1rem;
                  line-height: 0.25rem;
                  text-align: center;
                  border-radius: 0.1rem;
                  background-color: rgba(226, 211, 211,0.2);
                  &.active{
                      color: #ff5934;
                      border: 0.01rem solid #ff5934;
                  }
              }
          }
      }
    //  颜色样式
    .detailColor{
          margin-top: 0.3rem;
          margin-left: 0.2rem;
          .detailColorBottom{
              display: flex;
              justify-content: space-evenly;
              margin-top: 0.1rem;
              li{
                  margin-right: 0.2rem;
                  height: 0.25rem;
                  width: 1rem;
                  line-height: 0.25rem;
                  text-align: center;
                  border-radius: 0.1rem;
                  background-color: rgba(226, 211, 211,0.2);
                  &.active{
                      color: #ff5934;
                      border: 0.01rem solid #ff5934;
                  }
              }
          }
      }
    // 购买数量样式
    .detailBuyNum{
        height: 0.5rem;
        line-height: 0.2rem;
        display: flex;
        justify-content: space-between;
        margin: 0.3rem 0.2rem 0;
        // vertical-align: middle;
        .BuyRight{
             span{
                 vertical-align: middle;
             }
            input{
                width: 0.3rem;
                height: 0.3rem;
                border: none;
                font-size: 0.18rem;
                margin-left: 0.06rem;
                margin-right: 0.06rem;
                background-color: rgb(238, 235, 235);
                text-align: center;
            }
        }
    }
    .address{
        height: 1rem;
        margin: 0.2rem 0.1rem 0 0.2rem;
        display: flex;
        justify-content: space-between;
        div{
            vertical-align: top;
            i{
                display: inline-block;
                font-size: 0.14rem;
                line-height: 0.4rem;     
            }
        }
        icon{
                margin-left: 1rem;   
            }
    }

    //装饰底部的图片
    .footerImg{
        width: 100%;
        height: 100%;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }



// 清除浮动
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

  }
</style>